<template>
  <!-- 原模板内容保持不变 -->
  <div class="app-container home">
    <!-- 在线用户监控 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <template #header>
            <span>在线用户监控</span>
          </template>
          <div ref="onlineUserChart" style="height: 400px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 服务监控 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>CPU 监控</span>
          </template>
          <div ref="cpuChart" style="height: 300px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>内存监控</span>
          </template>
          <div ref="memoryChart" style="height: 300px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 缓存监控 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>缓存命令统计</span>
          </template>
          <div ref="cacheCommandChart" style="height: 300px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>缓存内存信息</span>
          </template>
          <div ref="cacheMemoryChart" style="height: 300px;"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
  // 原脚本内容保持不变
  import { ref, onMounted } from 'vue';
  import * as echarts from 'echarts';
  import {getAllOnlineUser} from '@/api/monitor/online';
  import { getServer } from '@/api/monitor/server';
  import { getCache } from '@/api/monitor/cache';

  // 在线用户监控图表
  const onlineUserChart = ref(null);
  // CPU 监控图表
  const cpuChart = ref(null);
  // 内存监控图表
  const memoryChart = ref(null);
  // 缓存命令统计图表
  const cacheCommandChart = ref(null);
  // 缓存内存信息图表
  const cacheMemoryChart = ref(null);

  // 获取在线用户数据
  const getOnlineUserChartData = async () => {
    const response = await getAllOnlineUser();
    const data = response.data.list;
    console.log(data, "用户在线数据");

    // 统计每个用户的登录次数
    const userLoginCount = {};
    data.forEach(item => {
      if (userLoginCount[item.userName]) {
        userLoginCount[item.userName]++;
      } else {
        userLoginCount[item.userName] = 1;
      }
    });

    // 提取用户名和登录次数
    const userNames = Object.keys(userLoginCount);
    const loginCounts = Object.values(userLoginCount);

    const chart = echarts.init(onlineUserChart.value);
    chart.setOption({
      xAxis: {
        type: 'category',
        data: userNames
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: loginCounts,
        type: 'bar'
      }]
    });
  };

  // 获取服务监控数据
  const getServerChartData = async () => {
    const response = await getServer();
    const server = response.data;
    console.log(server, "服务监控数据")

    // CPU 监控图表
    const cpuChartInstance = echarts.init(cpuChart.value);
    cpuChartInstance.setOption({
      xAxis: {
        type: 'category',
        data: ['核心数', '用户使用率', '系统使用率', '当前空闲率']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [server.cpu.cpuNum, server.cpu.used, server.cpu.sys, server.cpu.free],
        type: 'bar'
      }]
    });

    // 内存监控图表
    const memoryChartInstance = echarts.init(memoryChart.value);
    memoryChartInstance.setOption({
      xAxis: {
        type: 'category',
        data: ['总内存', '已用内存', '剩余内存', '使用率']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [server.mem.total, server.mem.used, server.mem.free, server.mem.usage],
        type: 'bar'
      }]
    });
  };

  // 获取缓存监控数据
  const getCacheChartData = async () => {
    const response = await getCache();
    const cache = response.data;
    console.log(cache, "缓存监控数据")

    // 缓存命令统计图表
    const cacheCommandChartInstance = echarts.init(cacheCommandChart.value);
    cacheCommandChartInstance.setOption({
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      series: [
        {
          name: "命令",
          type: "pie",
          roseType: "radius",
          radius: [15, 95],
          center: ["50%", "38%"],
          data: cache.commandStats,
          animationEasing: "cubicInOut",
          animationDuration: 1000
        }
      ]
    });

    // 缓存内存信息图表
    const cacheMemoryChartInstance = echarts.init(cacheMemoryChart.value);
    cacheMemoryChartInstance.setOption({
      tooltip: {
        formatter: "{b} <br/>{a} : " + cache.info.used_memory_human
      },
      series: [
        {
          name: "峰值",
          type: "gauge",
          min: 0,
          max: 1000,
          detail: {
            formatter: cache.info.used_memory_human
          },
          data: [
            {
              value: parseFloat(cache.info.used_memory_human),
              name: "内存消耗",
              title: {
                offsetCenter: ["0%", "-20%"]
              },
              // 数据字体样式
              detail: {
                fontSize: 16,
                fontWeight: "bold",
                offsetCenter: ["0%", "35%"],
              }
            }
          ]
        }
      ]
    });
  };

  onMounted(() => {
    getOnlineUserChartData();
    getServerChartData();
    getCacheChartData();
  });
</script>

<style scoped lang="scss">
.home {
  padding: 20px;
  // 添加毛玻璃效果
  backdrop-filter: blur(10px); 
  background-color: rgba(255, 255, 255, 0.3); 
  border-radius: 10px;
}

.el-card {
  margin-bottom: 20px;
  // 为卡片也添加毛玻璃效果
  backdrop-filter: blur(5px); 
  background-color: rgba(255, 255, 255, 0.5); 
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
</style>